<template>
    <div class="interest_preview_container">

        <el-breadcrumb separator="/">
            <el-breadcrumb-item>产品</el-breadcrumb-item>
            <el-breadcrumb-item>非趣不可</el-breadcrumb-item>
            <el-breadcrumb-item>预览</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 闪购信息 -->
        <el-card>

            <!-- title -->
            <el-row class="title">
                <el-col>闪购信息</el-col>
            </el-row>

            <!-- 主体内容 -->
            <div class="interest_preview_content">
                <div class="flashover">

                    <!-- 二维码 -->
                    <div class="code_box">
                        <div class="code">小程序码</div>
                        <span>手机扫描小程序码进行预览</span>
                    </div>

                    <div class="item">
                        <div class="k">闪购名称：</div>
                        <div class="val">曼谷+芭堤雅7日6晚跟团游</div>
                    </div>

                    <div class="item">
                        <div class="k">副标题：</div>
                        <div class="val">全程0自费·升级两晚网评五钻酒店·全程两天自由活动·仅两站购物·双岛出海· 长尾船游湄南河</div>
                    </div>

                    <div class="item">
                        <div class="k">编码：</div>
                        <div class="val">12312313212</div>
                    </div>

                    <div class="item">
                        <div class="k">展示图片：</div>
                        <img class="img" src="http://p5o5m4a9h.bkt.clouddn.com/mountain/mountain.png" alt="">
                    </div>

                    <div class="item">
                        <div class="k">原价：</div>
                        <div class="val">￥3600</div>
                    </div>

                    <div class="item">
                        <div class="k">原价：</div>
                        <div class="val">
                            <span>无购物</span>
                            <span>无购物</span>
                            <span>无购物</span>
                        </div>
                    </div>

                    <div class="item1">
                        <div class="k">产品介绍：</div>
                        <div class="detail_box">
                            <div class="text">特别说明：请预定之前咨询客服，了解余位及具体行程，具体机票价格以实际出票为准。由此带来的不便请谅解，谢谢！ 🍌🍌该产品为本社热销产品，全国发班，位置充足，如需要出行的客人，可随时下单，下单后贴心客服会及时联系您，谢谢！ 🍌🍌🍌🍌我社不包含泰国签证费用，如需代办签证请下单时自行在附加服务勾选 提前办理泰国签证需要的时间：云南省签发护照2-3个工作日，其他省份7-10个工作日，如客人需要办理落地签，费用自理。特殊情况另行通知，谢谢！🍌🍌 |▍特别说明：可全国出发，请预定之前咨询客服，谢谢！</div>

                            <img src="http://p5o5m4a9h.bkt.clouddn.com/mountain/mountain.png" class="img">

                            <img src="http://p5o5m4a9h.bkt.clouddn.com/mountain/mountain.png" class="img">

                            <img src="http://p5o5m4a9h.bkt.clouddn.com/mountain/mountain.png" class="img">
                        </div>
                    </div>
                </div>
            </div>

            <!-- 表格 -->
            <div class="interest_preview_content">
                <div class="traffic_info">交通信息:</div>

                <el-table class="traffic_info_table" :data="tableData" border style="width: 100%">
                    <el-table-column prop="date" label="日期" width="120">
                    </el-table-column>

                    <el-table-column prop="name" label="出发地-目的地">
                    </el-table-column>

                    <el-table-column prop="address" label="班次">
                    </el-table-column>

                    <el-table-column prop="date" label="出发时间">
                    </el-table-column>

                    <el-table-column prop="name" label="出发地点">
                    </el-table-column>

                    <el-table-column prop="address" label="到达时间">
                    </el-table-column>

                    <el-table-column prop="address" label="到达地点">
                    </el-table-column>
                </el-table>
            </div>
        </el-card>

        <!-- 购买须知 -->
        <el-card>

            <!-- title -->
            <el-row class="title">
                <el-col>购买须知</el-col>
            </el-row>

            <div class="interest_preview_content">
                <div class="flashover">

                    <div class="item1">
                        <div class="k">人群须知：</div>
                        <ul class="text_more">
                            <li>最少成团人数16人，出发前30天如您未收到成团通知，携程会短信询问您是否愿意等待。如您预订时距出发日期已不足30天，携程不保证一定成团，下 单后请您耐心等待是否成团的通知，您也可以选择已成团的班期或产品预订，以确保行程。宣布成团前，旅游者和出境社取消订单的，双方互不承担违约责任。宣布成团后，旅游者和出境社取消订单的，按照双方合同约定各自承担违约责任。</li>
                            <li>如因意外事件及不可抗力，包括但不限于，航空公司运力调配、航权审核、机场临时关闭、天气原因、航空管制等，导致航班取消或延期的，旅行社将尽最大努力协助您办理变更事宜，如产生差价，多退少补。 </li>
                            <li>您选购的机票若是团队机票，机票票号无法提前查询，同时不能提前办理值机，具体信息以出团通知书为准，敬请谅解。</li>
                        </ul>
                    </div>

                    <div class="item1">
                        <div class="k">人群须知：</div>
                        <ul class="text_more">
                            <li>最少成团人数16人，出发前30天如您未收到成团通知，携程会短信询问您是否愿意等待。如您预订时距出发日期已不足30天，携程不保证一定成团，下 单后请您耐心等待是否成团的通知，您也可以选择已成团的班期或产品预订，以确保行程。宣布成团前，旅游者和出境社取消订单的，双方互不承担违约责任。宣布成团后，旅游者和出境社取消订单的，按照双方合同约定各自承担违约责任。</li>
                            <li>如因意外事件及不可抗力，包括但不限于，航空公司运力调配、航权审核、机场临时关闭、天气原因、航空管制等，导致航班取消或延期的，旅行社将尽最大努力协助您办理变更事宜，如产生差价，多退少补。 </li>
                            <li>您选购的机票若是团队机票，机票票号无法提前查询，同时不能提前办理值机，具体信息以出团通知书为准，敬请谅解。</li>
                        </ul>
                    </div>

                    <div class="item1">
                        <div class="k">人群须知：</div>
                        <ul class="text_more">
                            <li>最少成团人数16人，出发前30天如您未收到成团通知，携程会短信询问您是否愿意等待。如您预订时距出发日期已不足30天，携程不保证一定成团，下 单后请您耐心等待是否成团的通知，您也可以选择已成团的班期或产品预订，以确保行程。宣布成团前，旅游者和出境社取消订单的，双方互不承担违约责任。宣布成团后，旅游者和出境社取消订单的，按照双方合同约定各自承担违约责任。</li>
                            <li>如因意外事件及不可抗力，包括但不限于，航空公司运力调配、航权审核、机场临时关闭、天气原因、航空管制等，导致航班取消或延期的，旅行社将尽最大努力协助您办理变更事宜，如产生差价，多退少补。 </li>
                            <li>您选购的机票若是团队机票，机票票号无法提前查询，同时不能提前办理值机，具体信息以出团通知书为准，敬请谅解。</li>
                        </ul>
                    </div>

                </div>
            </div>
        </el-card>

        <!-- 费用说明 -->
        <el-card>

            <!-- title -->
            <el-row class="title">
                <el-col>费用说明</el-col>
            </el-row>

            <div class="interest_preview_content">
                <div class="flashover">

                    <div class="item1">
                        <div class="k">人群须知：</div>
                        <div class="val">往返经济舱机票燃油附加费（以实际收费标准为准）机票税 <br> 往返出发地到出行集合地的联运航班机票。<br> 行程所列酒店住宿费用 <br> 酒店标准2人间 <br> 行程表上所列酒店(以两位成人共用一房为原则) <br> 行程所列用餐，7—8菜一汤，十人一桌。（早餐如在酒店外用为中式早餐；用餐时间在飞机或船上机船餐为准，不再另退餐费）；<br> 领队和当地中文导游服务。<br> 全程旅游空调巴士并配备外籍司机（每天用车8小时+2小时空车，超时需补超时费）；（旅行社可根据实际人数调配用车大小、座次）； 行程中所列景点首道大门票。 年龄2--18周岁（不含）,不占床,服务标准同成人
                        </div>
                    </div>

                    <div class="item1">
                        <div class="k">费用不含：</div>
                        <div class="val">本产品不包含泰国签证费用，如需代办请于预订时勾选。<br> 本产品不包含泰国落地签证费用，敬请自理。<br> 单房差 <br> 你的行程中不包含司导和领队小费，根据当地的风俗习惯和更好的激励随团人员的服务，建议您可在行程中支付小费（自愿），支付给导游，共计20元/天/人。<br> 出入境个人物品海关征税；超重行李的托运费、保管费; 因交通延阻、罢工、天气、机器故障等不可抗力原因所导致的额外费用: 酒店内洗衣、理发、电话、传真、收费电视、饮品、烟酒等个人消费; 自由活动期间的用车服务; 提供导游服务的产品在自由活动期间无陪同服务; 当地参加的自费以及“费用包含”中不包含的其它项目。<br> 本产品不包含旅游意外险，建议您自行购买旅游意外保险。
                        </div>
                    </div>

                </div>
            </div>
        </el-card>

        <!-- 行程管理 -->
        <el-card>

            <!-- title -->
            <el-row class="title">
                <el-col>行程管理</el-col>
            </el-row>

            <div class="interest_preview_content">

                <div class="Trip">
                    <!-- title -->
                    <div class="table_title">
                        <span>第一天</span>
                        <span>各地-曼谷</span>
                    </div>

                    <el-table :data="day1" border style="width: 100%">
                        <el-table-column prop="date" label="行程标签" width="119">
                        </el-table-column>

                        <el-table-column prop="address" label="行程内容">
                            <template slot-scope="scope">
                                <div class="traffic_info_text">
                                    <span>{{ scope.row.address.text1 }}</span>
                                    <span>{{ scope.row.address.text2 }}</span>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>

                <div class="Trip">
                    <!-- title -->
                    <div class="table_title">
                        <span>第二天</span>
                        <span>北京-布拉格-德国小镇</span>
                    </div>

                    <el-table :data="day2" border style="width: 100%">
                        <el-table-column prop="date" label="行程标签" width="119">
                        </el-table-column>

                        <el-table-column prop="traffic_info" label="行程内容">
                            <template slot-scope="scope">
                                <div class="traffic_info_text">
                                    <span>{{ scope.row.traffic_info.text1 }}</span>
                                    <span>{{ scope.row.traffic_info.text2 }}</span>
                                    <span>{{ scope.row.traffic_info.text3 }}</span>
                                    <span>{{ scope.row.traffic_info.text4 }}</span>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </el-card>

        <!-- 价格管理 -->
        <el-card>

            <!-- title -->
            <el-row class="title">
                <el-col>价格管理</el-col>
            </el-row>

            <div class="interest_preview_content">
                <div class="price">
                    <el-table :data="price" style="width: 100%">
                        <el-table-column prop="date" label="日期">
                        </el-table-column>

                        <el-table-column prop="adult_price" label="成人价">
                        </el-table-column>

                        <el-table-column prop="adult_num" label="成人数量">
                        </el-table-column>

                        <el-table-column prop="is_children" label="是否有儿童">
                        </el-table-column>

                        <el-table-column prop="children_price" label="儿童价">
                        </el-table-column>

                        <el-table-column prop="children_num" label="儿童数量">
                        </el-table-column>

                        <el-table-column prop="single_room" label="单房差">
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </el-card>

        <!-- 审核是否通过 -->
        <div class="Auditing">
            <div class="left">
                <span class="my_icon">!</span>
                <span class="text">提交前请仔细检查各项信息！</span>
            </div>

            <div class="right">
                <el-button @click="back">返回</el-button>
                <el-button @click="not_pass_show = true">审核不通过</el-button>
                <el-button @click="pass_show = true" type="primary">审核通过</el-button>
            </div>
        </div>

        <!-- 审核通过 -->
        <el-dialog title="审核通过" :visible.sync="pass_show" width="30%">
            <div class="pass_text">您确定要审核通过该产品吗？</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="pass_show = false">取 消</el-button>
                <el-button type="primary" @click="pass_show = false">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 审核不通过 -->
        <el-dialog title="审核不通过" :visible.sync="not_pass_show" width="30%">

            <!-- 文本框 -->
            <el-input rows="7" style="resize:none;" clearable="not_pass_textarea" type="textarea" v-model="why_not_pass" placeholder="请输入审核不通过的理由"></el-input>

            <span slot="footer" class="dialog-footer">
                <el-button @click="not_pass_show = false">取 消</el-button>
                <el-button type="primary" @click="not_pass_show = false">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script src='../../../static/js/interest/preview.js'></script>


<style scoped>
@import "../../../static/css/interest/preview.css";
</style>


